<template>
  <div class="main">
    <div class="main-title">查看盘点报告</div>
    <div class="main-content">
      <el-row>
        <el-col :span="14">
          <el-form label-width="120px" :model="reportInfo">
            <el-form-item label="库存截止时间：">{{reportInfo.createTime}}</el-form-item>
            <el-form-item label="创建人：">{{reportInfo.creator}}</el-form-item>
            <el-form-item label="状态：">{{checkStatusTypes.Types[reportInfo.checkStatus]}}</el-form-item>
            <el-form-item label="仓库商品库存：">
              <div class="stock-box">
                <div class="hd">
                  <div class="name">商品名称</div>
                  <div class="spu">SPU</div>
                  <div class="unit">规格</div>
                  <div class="sku">SKU</div>
                  <div class="position">摆放位置</div>
                  <div class="stock">剩余库存</div>
                  <div class="num">实际库存</div>
                  <div class="operate">
                    溢损数量
                    <el-tooltip effect="light" content="+、- 分别表示报溢、报损" placement="top">
                      <el-button type="text" icon="el-icon-question"></el-button>
                    </el-tooltip>
                  </div>
                </div>
                <div class="bd">
                  <div class="item" v-for="(good, gi) in reportInfo.list" :key="gi">
                    <div class="name"><span class="center">{{good.commodityName}}</span></div>
                    <div class="spu"><span class="center">{{good.commodityNo}}</span></div>
                    <div class="attr-box">
                      <div class="attr" v-for="(attr, ai) in good.sellAttributesList" :key="ai">
                        <div class="unit">{{attr.attributeName}}</div>
                        <div class="sku">{{attr.attributeSku}}</div>
                        <div class="position">{{attr.position}}</div>
                        <div class="stock">{{attr.realStockNum}}</div>
                        <div class="num">{{attr.checkStockNum}}</div>
                        <div class="operate">
                          <span class="center">{{attr.checkStockNum - attr.realStockNum}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input v-model="reportInfo.checkRemark" type="textarea" :maxlength="1000" :autosize="{ minRows: 2, maxRows: 4}" style="width: 430px;" disabled></el-input>
            </el-form-item>
            <el-form-item label="盘点完成时间：">
              {{reportInfo.modifyTime}}
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="tools-wrapper" style="padding-left: 120px;">
        <el-button type="default" @click="cancel">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/date'
import { checkStatusTypes } from '@/data/enum'
export default {
  data () {
    return {
      checkPlanId: this.$route.query.checkPlanId || '',
      reportInfo: {},
      checkStatusTypes
    }
  },
  mounted () {
    this.getData()
  },
  computed: {
  },
  methods: {
    // 获取盘点报告基础信息
    getData () {
      this.$loading()
      this.$http.post(this.$api + '/stockCheckPlan/queryStockCheckPlanDetailById', {
        checkPlanId: this.checkPlanId || ''
      }).then(res => {
        if (res.responseCode === '0000') {
          res.data.createTime = formatDate(new Date(res.data.createTime), 'yyyy-MM-dd hh:mm:ss')
          res.data.modifyTime = formatDate(new Date(res.data.modifyTime), 'yyyy-MM-dd hh:mm:ss')
          this.reportInfo = res.data
          if (!this.reportInfo.checkRemark) {
            this.$set(this.reportInfo, 'checkRemark', '')
          }
        } else {
          this.$message.error({
            duration: this.$store.state.duration,
            message: res.responseMsg
          })
        }
      }).catch(err => {
        console.error(err)
      })
      this.$loading().close()
    },
    // 取消
    cancel () {
      this.$router.push({
        path: '/stock/checkPlan',
        query: {
          pg: this.$route.query.pg,
          size: this.$route.query.size
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.stock-box {
  width: 1081px;
  text-align: center;
  .name,
  .spu,
  .sku,
  .position {
    width: 180px;
  }
  .unit,
  .stock,
  .num,
  .operate {
    width: 90px;
  }
  .hd {
    height: 45px;
    line-height: 45px;
    background: #f8fcff;
    border-top: solid 1px #ebeef5;
    border-left: solid 1px #ebeef5;
    & > div {
      float: left;
      border-right: solid 1px #ebeef5;
    }
  }
  .bd {
    max-height: 400px;
    overflow: auto;
    background: #ffffff;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    .item {
      display: flex;
      justify-content: space-between;
      align-content: stretch;
      div {
        border-right: 1px solid #ebeef5;
        border-bottom: 1px solid #ebeef5;
      }
      .operate {
        position: relative;
        width: 90px;
      }
      .name,
      .spu {
        position: relative;
        width: 180px;
      }
      .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 160px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .attr-box {
        border: 0;
        .attr {
          display: flex;
          border: 0;
        }
        .counter {
          border: 0;
          width: 80px;
        }
      }
    }
  }
}
</style>
